<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8"> 
        <style>
            pre {
                margin: 5px;
                padding: 5px;
                border: 1px solid black;
            }
        </style>
        <script>
            window.onload = function() {
                // ヘッダー取得
                var eH2 = document.querySelector("h2.header");
                log("【" + eH2.innerHTML + "】");
                
                // class に blood-type がある要素ををすべて取得
                var eBloodTypeList = document.querySelectorAll(".blood-type");
                var bloodTypeList = [];
                for (var i=0,len=eBloodTypeList.length; i<len; ++i) {
                    bloodTypeList.push( "'" + eBloodTypeList[i].innerHTML + "'" );
                }
                log("赤血球の遺伝子に応じて" + bloodTypeList.join(",") + "に分類する方法.");
                
                // blood-type-list の子供で my class がついている要素を取得
                var eMyBloodType = document.querySelector("#blood-type-list .my");
                log("ちなみに私の血液型は '" + eMyBloodType.innerHTML + "' です.");
                
                // id で取得
                var eBType = document.querySelector("#B-type");
                log("学生時代の友人は '" + eBType.innerHTML + "' が多かったです.");
                
                var eOType = document.querySelector("#O-type");
                log("職場の同僚は'" + eOType.innerHTML + "' が多いです.");
                
                log("【test】");
                log(document.querySelector("section>h2").innerHTML);
            };
            
            // ログ出力
            var log = function(str) {
                var eConsole = document.getElementById("console");
                eConsole.innerHTML += str;
                eConsole.innerHTML += '\n';
            };
        </script>
    </head>
    <body>
        <h1>Selectors API の querySelector/querySelectorAll を使ってみよう.</h1>
        
        <section>
            <h2 class="header">AOB式血液型</h2>
            <ul id="blood-type-list">
                <li id="A-type" class="blood-type">A 型</li>
                <li id="B-type" class="blood-type">B 型</li>
                <li id="O-type" class="blood-type my">O 型</li>
                <li id="AB-type" class="blood-type">AB 型</li>
            </ul>
        </section>
        
        <section>
            <h2>Console</h2>
            <pre id="console"></pre>
        </section>
    </body>
</html>